<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>管理员登录页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/jquery.toast.css">

    <style>
        #verificationCodeImg {
            vertical-align: middle;
        }
    </style>
</head>

<body class="login-page">
    <!-- 登录框区域 -->
    <div class="login-box row">
        <div class="img-box col-sm-6  col-md-6 col-lg-7 col-xl-7">
            <img src="./pic/login-left.png" class="img-fluid" alt srcset>
        </div>
        <div class="login-container col-sm-6 col-md-6 col-lg-5 col-xl-5">

            <div class="tab-box">
                <span class="active tab-span" data-form="loginForm">密码登录</span>
                <span class="tab-span" data-form="codeForm">验证码登录</span>
            </div>
            <form id="loginForm">
                <div class="form-group">
                    <label for="phoneNumber">账号</label>
                    <input class="form-control" type="text" id="phoneNumber" name="phoneNumber" required
                        placeholder="请输入手机号或邮箱">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input class="form-control" type="password" id="password" name="password" required
                        placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary btn-block login-btn">登录</button>
                <div class="error"></div>
            </form>
            <!-- 验证码登录框 -->
            <form id="codeForm" style="display: none;">
                <div class="form-group">
                    <label for="loginMobile">手机号</label>
                    <input class="form-control" type="text" id="loginMobile" name="loginMobile" required
                        placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <label for="verificationCode">验证码</label>
                    <div class="code-box">
                        <input class="form-control" type="text" id="verificationCode" name="verificationCode" required
                            placeholder="请输入验证码">
                        <!-- <div class="btn btn-primary " id="getVerificationCode">获取验证码</div> -->
                        <!-- 初始隐藏验证码图片 -->
                        <img id="verificationCodeImg" src="#" style="display: none; cursor: pointer;" title="看不清？换一张" />
                    </div>
                </div>
                <div class="error-message" id="captchaError" style="color: red; display: none;"></div>
                <button type="submit" class="btn btn-primary btn-block login-btn">登录</button>
                <div class="error"></div>
            </form>
            <div class="register-link">
                还没有账号，去<a href="register.html?admin=true">注册</a>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="./js/jquery.toast.js"></script>
    <script>
        // 加载验证码图片的函数（支持错误处理）
        function loadCaptchaImage(phone) {
            const errorDiv = document.getElementById('captchaError');
            const codeImg = document.getElementById('verificationCodeImg');

            // 发起请求获取验证码图片
            fetch(`/user/verification-code/send?phoneNumber=${encodeURIComponent(phone)}&t=${Date.now()}`)
                .then(response => {
                    // 1. 获取响应头中的 Content-Type
                    const contentType = response.headers.get('content-type') || '';

                    // 2. 如果响应是 JSON 格式（后端返回错误）
                    if (contentType.includes('application/json')) {
                        return response.json().then(data => {
                            // 检查业务错误码
                            if (data.code !== 200) {
                                throw new Error(data.msg || '未知错误');
                            } else {
                                // 业务码为 200 但 Content-Type 是 JSON，视为逻辑错误
                                throw new Error('响应数据格式异常');
                            }
                        });
                    }
                    // 3. 如果响应是图片格式（验证码成功）
                    else if (contentType.startsWith('image/')) {
                        return response.blob();
                    }
                    // 4. 其他类型响应（如文本、HTML 等）
                    else {
                        throw new Error(`不支持的响应类型: ${contentType}`);
                    }
                })
                .then(data => {
                    // 处理图片数据（Blob 类型）
                    if (data instanceof Blob) {
                        // 隐藏错误，显示图片
                        errorDiv.style.display = 'none';
                        codeImg.style.display = 'inline';
                        codeImg.src = URL.createObjectURL(data);
                    }
                    // 其他数据类型（理论上不会执行到这里）
                    else {
                        throw new Error('未知的响应数据');
                    }
                })
                .catch(error => {
                    // 统一错误处理
                    errorDiv.textContent = error.message;
                    errorDiv.style.display = 'block';
                    codeImg.style.display = 'none';
                    codeImg.src = '#';
                });
        }
        document.getElementById('loginMobile').addEventListener('input', function (e) {
            const phone = e.target.value.trim();
            const codeImg = document.getElementById('verificationCodeImg');

            if (/^\d{11}$/.test(phone)) {
                loadCaptchaImage(phone); // 调用新函数加载验证码
            } else {
                codeImg.style.display = 'none';
                codeImg.src = '#';
                document.getElementById('captchaError').style.display = 'none'; // 隐藏错误
            }
        });

        document.getElementById('verificationCodeImg').addEventListener('click', function () {
            const phone = document.getElementById('loginMobile').value.trim();
            if (/^\d{11}$/.test(phone)) {
                loadCaptchaImage(phone); // 重新加载验证码
            } else {
                alert('请先输入有效的手机号');
            }
        });

        // // 监听手机号输入框的输入事件
        // document.getElementById('loginMobile').addEventListener('input', function (e) {
        //     const phone = e.target.value.trim();
        //     const codeImg = document.getElementById('verificationCodeImg');

        //     // 校验手机号格式（11位数字）
        //     if (/^\d{11}$/.test(phone)) {
        //         // 显示验证码图片并加载
        //         codeImg.style.display = 'inline';
        //         codeImg.src = `/user/verification-code/send?phoneNumber=${encodeURIComponent(phone)}&t=${Date.now()}`;
        //     } else {
        //         // 隐藏验证码图片
        //         codeImg.style.display = 'none';
        //         codeImg.src = '#'; // 清空无效图片
        //     }
        // });
        // // 监听验证码图片的点击事件（刷新）
        // document.getElementById('verificationCodeImg').addEventListener('click', function () {
        //     const phone = document.getElementById('loginMobile').value.trim();
        //     if (/^\d{11}$/.test(phone)) {
        //         // 重新加载验证码（加随机参数避免缓存）
        //         this.src = `/user/verification-code/send?phoneNumber=${encodeURIComponent(phone)}&t=${Date.now()}`;
        //     } else {
        //         alert('请先输入有效的手机号');
        //     }
        // });

        $("#loginForm").validate({
            rules: {
                phoneNumber: "required",
                password: {
                    required: true,
                    minlength: 6
                }
            },
            messages: {
                phoneNumber: "请输入您的手机号",
                password: {
                    required: "请输入密码",
                    minlength: "密码长度至少为6个字符"
                }
            },
            submitHandler: function (form) {
                var loginName = $('#phoneNumber').val();
                var password = $('#password').val();
                var formData = {
                    'loginName': loginName,
                    'password': password,
                    'mandatoryIdentity': 'ADMIN'
                }

                // 清除之前的错误消息
                $('.error').text('');
                // 发送AJAX请求
                $.ajax({
                    url: '/user/password/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (respData) {
                        if (respData.code == 200) {
                            console.log('登陆成功');
                            $.toast({
                                heading: '成功',
                                text: respData.msg,
                                icon: 'SUCESS'
                            });

                            //存储令牌,存储当前登陆用户身份
                            localStorage.setItem("user_token", respData.data.token);
                            localStorage.setItem("user_identity", respData.data.identity);
                            //跳转
                            location.assign("admin.html");
                        } else {
                            // 提示信息
                            $.toast({
                                heading: '警告',
                                text: respData.msg,
                                icon: 'warning'
                            });
                        }
                    },
                    error: function () {
                        // 提示信息
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        });
                    }
                });
                return false; // 阻止表单的默认提交行为
            }
        });

        // tab切换
        $('.tab-box span').click(function (e) {
            let formId = '#' + e.target.dataset.form
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
            $('form').hide()
            console.log(formId)
            $(formId).show()
        })
        // // 获取验证码
        // var timer = null
        // $('#getVerificationCode').click(function (e) {
        //     console.log(e, $(this).text())
        //     var txt = $(this).text()
        //     var num = 60
        //     if (txt.indexOf('获取') !== -1) {
        //         $('#getVerificationCode').text(num + 's')
        //         getCode()
        //         // 获取验证码接口
        //         timer && clearInterval(timer)
        //         timer = setInterval(function () {
        //             if (num > 1) {
        //                 num--
        //                 $('#getVerificationCode').text(num + 's')
        //             } else {
        //                 timer && clearInterval(timer)
        //                 $('#getVerificationCode').text('重新获取')
        //             }
        //         }, 1000)
        //     }
        // })
        // function getCode() {
        //     $.ajax({
        //         url: '/user/verification-code/send',
        //         type: 'get',
        //         data: { phoneNumber: $('#loginMobile').val() },
        //         success: function (result) {
        //             if (result.code != 200) {
        //                 timer && clearInterval(timer)
        //                 $('#getVerificationCode').text('重新获取')
        //                 toastr.error('验证码获取失败');
        //             } else {
        //                 toastr.success('验证码发送成功')
        //             }
        //         },
        //     });
        // }
        // 验证码登录
        $("#codeForm").validate({
            rules: {
                loginMobile: "required",
                verificationCode: "required",
            },
            messages: {
                loginMobile: "请输入您的手机号",
                verificationCode: "请输入验证码",
            },
            submitHandler: function (form) {
                var loginMobile = $('#loginMobile').val();
                var verificationCode = $('#verificationCode').val();
                var formData1 = {
                    'loginMobile': loginMobile,
                    'verificationCode': verificationCode,
                    'mandatoryIdentity': 'ADMIN'
                }
                // 清除之前的错误消息
                $('.error').text('');
                // 发送AJAX请求
                $.ajax({
                    url: '/user/message/login',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(formData1),
                    success: function (respData) {
                        if (respData.code == 200) {
                            console.log('登陆成功');
                            $.toast({
                                heading: '成功',
                                text: respData.msg,
                                icon: 'SUCESS'
                            });

                            //存储令牌,存储当前登陆用户身份
                            localStorage.setItem("user_token", respData.data.token);
                            localStorage.setItem("user_identity", respData.data.identity);
                            //跳转
                            location.assign("admin.html");
                        } else {
                            // 提示信息
                            $.toast({
                                heading: '警告',
                                text: respData.msg,
                                icon: 'warning'
                            });
                        }
                    },
                    error: function () {
                        // 提示信息
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        });
                    }
                });
                return false; // 阻止表单的默认提交行为
            }
        });
    </script>
</body>

</html>